<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="cantaner">
			<h1>你好丶我姓宋</h1>
			<div class="items">
				<div class="itemsLeft"><a href="animails/animails.html" target="view_window"><img src="img/animals.png" alt="animals"></a></div>
				<div class="itemsRight">
					<h2>animals（用CSS3的clip-path制作拼接图形。）</h2>
					<p>
						由于兼容性问题，请使用webkit内核浏览器(chrome)打开</p>
					<p>本作品使用css3新属性clip-path打造的3D模型渲染器，用:nth-child伪类选择器来控制每一块三角形的形状，再使用polygon传入三个参数代表三角形的三个顶点，同时单位采用百分比的形式，已达到响应式的效果。通过动态改变关键帧的方式来实现动画效果，在切换数据时候又动态改变对象的transition属性值来达到切换的动画效果。</p>
				</div>
			</div>

			<div class="items">
				<div class="itemsLeft"><a href="times/calendar.html" target="view_window"><img src="img/calendar.png" alt="calendar"></a></div>
				<div class="itemsRight">
					<h2>calendar</h2>
					<p>本作品是使用原生js编写模拟win10系统的日历插件。可以通过选择年月日来计算日期。</p>
				</div>
			</div>


			<div class="items">
				<div class="itemsLeft"><a href="windows/index.html" target="view_window"><img src="img/win7.png" alt="iPhone"></a></div>
				<div class="itemsRight">
					<h2>win7</h2>
					<p>本作品使用原生js+日历插件+运动插件等模拟win7操作系统，可以切换背景图片、新建文件夹、重命名、拖拽、删除等功能</p>
				</div>
			</div>

			<div class="items">
				<div class="itemsLeft"><a href="react/reactTest01/index.html" target="view_window"><img src="img/react01.png" alt="react01"></a></div>
				<div class="itemsRight">
					<h2>react练习</h2>
					<p>本作品是使用react编写的一个筛选信息的table表格。</p>
				</div>
			</div>
			<div class="items">
				<div class="itemsLeft"><a href="iphone5s/iphone5s.html" target="view_window"><img src="img/iPhone.png" alt="iPhone"></a></div>
				<div class="itemsRight">
					<h2>iPhone图片</h2>
					<p>本作品是使用css3伪类选择器编写的iPhone手机模型。</p>
				</div>
			</div>
			<div class="toTop">Top</div>
		</div>
	</body>
	<script src="js/jquery-1.11.0.js"></script>
	<script>
		$(function () {
			$('.toTop').on('click',function () {
				$('body,html').animate({ scrollTop: 0 }, 300);
				return false;
			})
		})
	</script>
</html>
